<template>
	<view class="repair-inquiry">
		<up-sticky :z-index="99">
			<image type="image" src="http://www.weijiashangejiance.com/image.png" alt="顶部 banner" class="top-img"
				mode="widthFix" />
			<view class="top-text">维保记录查询参考</view>
			<!-- 选项卡：点击触发锚点滚动 -->
			<up-tabs :list="list" @click="handleChange" :current="current" :active-line-width="40"></up-tabs>
		</up-sticky>

		<!-- 滚动容器：通过scroll-into-view实现锚点 -->
		<scroll-view scroll-y="true" class="scroll-container" :scroll-into-view="currentAnchor" scroll-with-animation
			@scroll="onScroll" :scroll-top="scrollTop">
			<view class="list-box">
				<!-- 每个内容块设置唯一ID用于锚点定位 -->
				<view class="list-item" id="anchor-0">
					<view class="record-title">一、4S店维修保养查询记录</view>
					<view class="record-content">
						<view class="record-main record-main-title">▪ 维保记录查询参考</view>
						<div class="record-main-label">车辆记录是威佳质量认证公司帮您查到的历史数据，可能存在相关未被记录的描述，具体车况请以现场实车为准</div>
						<uni-table border stripe emptyText="暂无更多数据">
							<!-- 表头行 -->
							<uni-tr>
								<uni-th align="center">年份</uni-th>
								<uni-th align="center">公里数</uni-th>
								<uni-th align="center">项目</uni-th>
								<uni-th align="center">材料</uni-th>

							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item, index) in tableData" :key="'index' + index">
								<uni-td>{{ item.reportTime }}</uni-td>
								<uni-td>{{ item.lCb }}</uni-td>
								<uni-td>{{ item.jyxm }}</uni-td>
								<uni-td>{{ item.cailiao }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>

				<view class="list-item" id="anchor-1">
					<view class="record-title">二、保险查询记录</view>
					<view class="record-content">
						<view class="content-item">
							<image v-if="listData.infoFiles && listData.infoFiles[0].bxzzrq" mode="widthFix"
								:src="'http://www.weijiashangejiance.com' + listData?.infoFiles[0].bxzzrq"
								@load="handleImageLoad(1)" @click="previewImg(listData?.infoFiles[0].bxzzrq)"></image>

							<Empty v-else></Empty>
						</view>
					</view>
				</view>

				<view class="list-item" id="anchor-2">
					<view class="record-title">三、维保记录</view>
					<view class="record-content" v-if="listData?.infoFiles && listData?.infoFiles[0].icon">
						<image v-for="(item, index) in listData?.infoFiles[0].icon.split(',')" :key="index"
							:src="'http://www.weijiashangejiance.com' + item" mode="widthFix" @load="handleImageLoad(2)"
							@click="previewImg(item)"></image>
					</view>
					<Empty v-else></Empty>
				</view>

				<view class="list-item" id="anchor-3">
					<view class="record-title">四、车漆数据记录（以下数据仅供参考）</view>
					<view class="record-content">
						<image v-if="listData?.infoFiles && listData?.infoFiles[0].log"
							:src="'http://www.weijiashangejiance.com' + listData?.infoFiles[0].log" mode="widthFix"
							@load="handleImageLoad(3)" @click="previewImg(listData?.infoFiles[0].log)">
						</image>

						<Empty v-else></Empty>
					</view>
				</view>

				<view class="list-item" id="anchor-4">
					<view class="record-title">五、事故车、泡水车、火烧车评测标准</view>
					<view class="record-content">
						<image v-if="listData?.infoFiles && listData?.infoFiles[0].icon"
							:src="'http://www.weijiashangejiance.com' + listData?.infoFiles[0].icon" mode="widthFix"
							@load="handleImageLoad(4)" @click="previewImg(listData?.infoFiles[0].icon)">
						</image>

						<Empty v-else></Empty>
					</view>
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script>
	import {
		getListMaintainRecord,
		getListMaintainRecordList
	} from '@/api/app.js'
	import Empty from '@/components/empty/index.vue'
	export default {
		components: {
			Empty
		},
		data() {
			return {
				current: 0,
				currentAnchor: 'anchor-0',
				scrollTop: 0, // 新增：用于精确控制滚动位置
				list: [{
						name: '4S店记录'
					},
					{
						name: '保险记录'
					},
					{
						name: '维保记录'
					},
					{
						name: '车漆记录'
					},
					{
						name: '团体标2021版'
					}
				],
				anchorPositions: [],
				imageLoadedFlags: {},
				anchorCalculated: false,
				tableData: [],
				listData: {},
				columns: [{
						title: '年份',
						key: 'reportTime',
						width: 60
					},
					{
						title: '公里数',
						key: 'lCb',
						width: 60
					},
					{
						title: '项目',
						key: 'jyxm',
						width: 60
					},
					{
						title: '材料',
						key: 'cailiao'
					},
				],
				isManualScroll: false // 新增：标记是否是手动点击tab触发的滚动
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.getListMaintainRecord(opt.id)
				this.getListMaintainRecordList(opt.id)
			}
		},
		onReady() {
			// 延迟获取锚点位置，确保DOM已完全渲染
			this.$nextTick(() => {
				this.calculateAnchorPositions()
			})
		},
		methods: {
			previewImg(url) {
				const urlImg = [`http://www.weijiashangejiance.com${url}`]
				uni.previewImage({
					urls: urlImg
				})
			},
			// 修改图片加载处理方法
			handleImageLoad(index) {
				// 标记图片已加载
				this.$set(this.imageLoadedFlags, index, true);

				// 延迟重新计算锚点位置
				setTimeout(() => {
					this.calculateAnchorPositions();
				}, 100);
			},
			handleRowClick() {},
			handleChange({
				index
			}) {
				this.isManualScroll = true;
				this.current = index;

				// 增加延迟确保锚点位置已更新
				setTimeout(() => {
					if (this.anchorPositions[index]) {
						this.scrollTop = this.anchorPositions[index].top - 150; // 调整偏移量
					} else {
						this.currentAnchor = `anchor-${index}`;
					}

					// 延长重置时间
					setTimeout(() => {
						this.isManualScroll = false;
					}, 500);
				}, 100);
			},

			onScroll(e) {
				// 手动点击tab时不处理滚动事件，避免冲突
				if (this.isManualScroll) return;

				const scrollTop = e.detail.scrollTop;
				if (!this.anchorPositions.length) return;

				// 从第一个锚点开始判断
				for (let i = 0; i < this.anchorPositions.length; i++) {
					const currentTop = this.anchorPositions[i].top - 100;
					const nextTop = this.anchorPositions[i + 1] ? this.anchorPositions[i + 1].top - 100 : Infinity;

					if (scrollTop >= currentTop && scrollTop < nextTop) {
						if (this.current !== i) {
							this.current = i;
						}
						break;
					}
				}
			},

			// 修改锚点位置计算方法
			calculateAnchorPositions() {
				this.anchorPositions = [];

				// 等待所有图片加载完成或超时
				const checkImagesLoaded = () => {
					const query = uni.createSelectorQuery().in(this);

					this.list.forEach((_, index) => {
						query.select(`#anchor-${index}`).boundingClientRect(data => {
							if (data) {
								// 获取相对于滚动容器的绝对位置
								this.anchorPositions[index] = {
									index,
									top: data.top + (this.scrollTop || 0) // 加上当前滚动位置
								};
							}
						}).exec();
					});
				};

				// 延迟执行确保DOM更新
				setTimeout(checkImagesLoaded, 200);
			},

			async getListMaintainRecordList(id) {
				const res = await getListMaintainRecordList({
					id
				})
				this.tableData = res.data
			},
			async getListMaintainRecord(id) {
				const res = await getListMaintainRecord({
					id
				})
				this.listData = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.repair-inquiry {
		background-color: #ffffff;
		// 禁止滚动

		.top-img {
			height: auto;
			width: 100%;
		}

		.top-text {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #409eff;
			font-weight: bold;
			padding: 20rpx 0;
		}

		.scroll-container {
			height: calc(100vh - 360rpx);
			box-sizing: border-box;
			width: 100%;
		}

		.list-box {
			padding: 20rpx;

			.list-item {
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				overflow: hidden;
				background: #fff;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

				.record-title {
					padding: 20rpx;
					background: #2a82e4;
					color: #fff;
					font-size: 28rpx;
					font-weight: 700;
				}

				.record-content {
					padding: 20rpx;

					.content-item {
						text-align: center;
						font-size: 26rpx;
						color: #333;
						padding: 15rpx 0;
						border-bottom: 1rpx solid #f5f5f5;

						&:last-child {
							border-bottom: none;
						}
					}

					.record-main-title {
						margin-bottom: 4rpx;
						font-size: 28rpx;
						font-weight: 700;
						text-decoration: underline;
						padding: 16rpx 16rpx 0;
					}

					.record-main-label {
						margin-bottom: 20rpx;
						padding: 0 16rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>